<route lang="json5" type="home">
{
layout: 'tabbar',
style: {
navigationStyle: 'custom',
navigationBarTitleText: '首页',
},
}
</route>

<script lang="ts" setup>
defineOptions({
  name: 'Home',
})

let safeAreaInsets: UniApp.SafeAreaInsets | null = null
let systemInfo: UniApp.GetSystemInfoResult | UniApp.WindowInfo = {} as any

// #ifdef MP-WEIXIN
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
    top: systemInfo.safeArea.top,
    right: systemInfo.windowWidth - systemInfo.safeArea.right,
    bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
    left: systemInfo.safeArea.left,
  }
  : null
// #endif

// #ifndef MP-WEIXIN
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

// 模拟场馆图片数据，可替换为实际图片路径
const venueImages = ref([
  '/static/venue_1.png',
  '/static/venue_1.png',
  '/static/venue_1.png',
])

onLoad(() => {
})
</script>

<template>
  <view class="page-container" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
    <!-- 带模糊效果的顶部图片 + 文字蒙层区域 -->
    <view class="banner-wrapper relative">
      <image
        src="/static/logo.jpg"
        alt="场馆logo"
        class="banner-img h-[300px] w-full object-cover blur-sm"
      />
      <view
        class="banner-overlay absolute bottom-0 left-0 right-0 from-black/30 to-transparent bg-gradient-to-t p-4 text-white">
        <text class="text-2xl font-bold">
          句芒综合训练馆
        </text>
        <text class="mt-2 text-base">
          体能训练、力量训练、举重、运动康复
        </text>
      </view>
    </view>

    <!-- 场馆图片横向滚动区域（已隐藏滚动条） -->
    <view class="venue-images-wrap px-4 py-3">
      <view class="venue-images flex overflow-x-auto space-x-3">
        <image
          v-for="(img, index) in venueImages"
          :key="index"
          :src="img"
          alt="场馆环境图"
          class="venue-img h-32 w-64 flex-shrink-0 rounded-md object-cover"
        />
      </view>
    </view>

    <!-- 分栏区域容器 -->
    <view class="columns-container">
      <!-- 地址栏 -->
      <view class="column-item">
        <text class="mb-2 text-xl font-bold">地址信息</text>
        <text class="text-gray-700 px-4">
          地址：河北省保定市竞秀区万和城
        </text>
      </view>
      <!-- 分隔线 -->
      <view class="divider"/>
      <!-- 教练团队栏（已移除图片） -->
      <view class="column-item">
        <text class="mb-2 text-xl font-bold px-4">
          教练团队
        </text>
        <!-- 外层容器开启横向滚动 -->
        <view class="coach-list flex overflow-x-auto pb-2 space-x-3 px-4">
          <view
            v-for="(coach, idx) in [
              { name: '刘杰', desc: '世界举重大奖赛冠军 国家健将...' },
              { name: '王聪', desc: '乒乓球奥运冠军葛杨私人康复师...' },
              { name: '连', desc: 'NSCA-CSCS 美国体能协会 注册体...' },
            ]"
            :key="idx"
            class="coach-item w-1/3 flex-shrink-0"
          >
            <image
              :src="`/static/coach1.png`"
              alt="教练头像"
              class="mx-auto mb-1 h-24 w-24 rounded-full"
            />
            <text class="block text-center text-base font-semibold">
              {{ coach.name }}
            </text>
            <text class="block text-center text-xs text-gray-600">
              {{ coach.desc }}
            </text>
          </view>
        </view>
      </view>
      <!-- 分隔线 -->
      <view class="divider"/>
      <!-- 会员卡栏 -->
      <view class="column-item">
        <view class="flex items-center justify-between px-4">
          <text class="text-xl font-bold">
            会员卡
          </text>
          <text class="text-gray-500">
            全部
          </text>
        </view>
        <!-- 这里可补充会员卡列表逻辑 -->
      </view>
    </view>
  </view>
</template>

<style scoped>
/* 页面整体容器，设置米灰色背景 */
.page-container {
  background-color: #f5e6d8; /* 米灰色，可根据需求微调色值 */
  min-height: 100vh;
}

.banner-wrapper {
  width: 100%;
  overflow: hidden;
}

.banner-img {
  filter: blur(2px); /* 降低模糊度，让图片更清晰，可根据需求调整数值 */
}

.banner-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* 场馆图片滚动区域样式（已添加隐藏滚动条样式） */
.venue-images-wrap {
  background-color: #f5e6d8; /* 与页面背景一致 */
}

.venue-images {
  -webkit-overflow-scrolling: touch; /* 优化iOS滚动体验 */
  scrollbar-width: none; /* 隐藏Firefox滚动条 */
}

/* 隐藏WebKit内核滚动条 */
.venue-images::-webkit-scrollbar {
  display: none;
}

.venue-img {
  border: 1px solid #eee;
}

/* 分栏容器样式 */
.columns-container {
  background-color: #f5e6d8;
}

.column-item {
  padding: 15px 0;
}

/* 分隔线样式 */
.divider {
  height: 4px; /* 调高横线高度，可根据需求继续调整 */
  background-color: #ccc; /* 更灰的颜色 */
  width: 100%; /* 让横线横穿整个屏幕 */
}

/* 教练团队滚动区域样式 */
.coach-list {
  -webkit-overflow-scrolling: touch; /* 优化iOS滚动体验 */
  scrollbar-width: none; /* 隐藏Firefox滚动条 */
}

/* 隐藏WebKit内核滚动条 */
.coach-list::-webkit-scrollbar {
  display: none;
}

.coach-item {
  text-align: center;
  padding: 10px 0; /* 增加内边距，提升布局美观度 */
}
</style>
